<template>
  <transition name="mine-sidebar-animation">
    <div v-show="isShow" class="sidebar-wrap">
      <div class="operate-section">
        <router-link
          tag="div"
          to="/mall"
          class="operate mall"
          v-ripple="{ color: '#e7e7e7' }"
          @click.native="hideSidebar"
        >
          饰品商城
        </router-link>
        <router-link
          tag="div"
          to="/user/payment"
          class="operate payment"
          v-ripple="{ color: '#e7e7e7' }"
          @click.native="hideSidebar"
        >
          充值
        </router-link>
      </div>
      <div class="router-select-section">
        <ul class="router-select" @click="hideSidebar">
          <router-link to="/user/withdraw" tag="li" class="select-item">
            <i class="icon iconfont icon-shipinbeibao"></i>
            <p class="text">饰品背包</p>
          </router-link>
          <router-link to="/user/transactions" tag="li" class="select-item">
            <i class="icon iconfont icon-wodezhangdan"></i>
            <p class="text">我的帐单</p>
          </router-link>
          <router-link to="/user/referral" tag="li" class="select-item">
            <i class="icon iconfont icon-tuiguangzhongxin"></i>
            <p class="text">推广中心</p>
          </router-link>
          <router-link to="/user/center" tag="li" class="select-item">
            <i class="icon iconfont icon-gerenzhongxin-zhong1-copy"></i>
            <p class="text">个人中心</p>
          </router-link>
          <router-link to="/user/notices" tag="li" class="select-item">
            <i class="icon iconfont icon-xiaoxitishi"></i>
            <p class="text">消息通知</p>
          </router-link>
        </ul>
      </div>
      <div class="logout"></div>
    </div>
  </transition>
</template>
<script type="text/ecmascript-6">
import { sidebarMixin } from 'assets/js/mixin'
export default {
  mixins: [sidebarMixin],
  props: {
    isShow: Boolean
  },
  data() {
    return {

    }
  }
}


</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.sidebar-wrap {
  display: flex;
  flex-direction: column;
}

.operate-section {
  flex: 0 0 52.5px;
  height: 52px;
  box-sizing: border-box;
  background-color: rgb(31, 31, 38);
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .operate {
    position: relative;
    color: #1a1c24;
    font-size: 14px;
    font-weight: 600;
    width: 48.5%;
    height: 36.5px;
    line-height: 36.5px;
    text-align: center;
    min-width: 64px;
    border-radius: 5px;
    letter-spacing: 0.02857em;
    text-transform: uppercase;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

    &.mall {
      background-color: #17B4ED;

      &:hover {
        background-color: #3ECCFF;
      }
    }

    &.payment {
      background-color: #E9B10E;

      &:hover {
        background-color: #f5c432;
      }
    }
  }
}

.router-select-section {
  flex: 1;

  .router-select {
    .select-item {
      display: flex;
      align-items: center;
      height: 38px;
      color: #848492;

      &:hover {
        color: #E9B10E;
      }

      &.router-link-active {
        color: #C3C3E2;
      }

      &:hover, &.router-link-active {
        background-color: #444659;
      }

      .icon {
        font-size: 20px;
        padding: 0 10px 0 20px;
      }

      .text {
        font-size: 14px;
        font-weight: 400;
        margin: 0;
      }
    }
  }
}

.logout {
  flex: 0 0 40px;
  height: 40px;
}

// 动画
.mine-sidebar-animation-enter-active, .mine-sidebar-animation-leave-active {
  transition: transform 0.2s ease-out;
}

.mine-sidebar-animation-enter, .mine-sidebar-animation-leave-to {
  transform: translateX(100%);
}
</style>
